<template>
  <div class="row">
    <!-- 添加过渡动画 -->
    <transition-group
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__bounceIn"
    leave-active-class="animate__backOutRight"
    >
    <!-- 展示用户列表 -->
      <div
        v-show="info.users.length"
        class="card"
        v-for="user of info.users"
        :key="user.id"
      >
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ user.login }}</p>
      </div>
      <!-- 展示欢迎词 -->
      <h1 v-show="info.isFirst" key="2">欢迎使用GitHub搜索！</h1>
      <!-- 展示加载中 -->
      <h1 v-show="info.isLoading" key="3">正在努力搜索中.....</h1>
      <!-- 展示错误信息 -->
      <h1 v-show="info.errMsg" key="4">哎呀，出错了 {{ info.errMsg }}</h1>
    </transition-group>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "List",
  data() {
    return {
      info: {
        isFirst: true, // 是否是第一次搜索
        isLoading: false, // 是否正在加载
        errMsg: "", // 错误信息
        users: [], // 返回的用户数据
      },
    };
  },

  methods: {
    updateListDate(dataObj) {
      // 注意：不能直接修改 this.data(无)和 this._data(内有getter,setter方法)
      // 将数据包裹在一个info对象中,修改this.info对象,调用了info的setter方法
      this.info = { ...this.info, ...dataObj };
      // ES6语法 扩展运算符,对象合并(使isFirst不丢失,在触发自定义事件时未传递该参数)
      console.log(this);
    },
  },

  mounted() {
    // 为全局事件总线绑定自定义事件,获取数据,并获取当前展示状态
    this.$bus.$on("updateListDate", this.updateListDate);
  },
};
</script>
<style scoped>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

h1{
  text-align: center;
}
</style>
